由於每個裝置的長寬不一樣，所以造成我們在拖拉放大縮小我們的頁面的時候，我們的圖片大小無法完全的match。這時候我們可以寫以下的code達成我們的目的，

.header {
        height: 100vh;
        padding: 0px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

值得注意的是，我們使用的是100vh而不是100%，這是因為100%所指的是所在容器的高度，但是我們想要的是裝置的高度，所以我們要更改為100vh(切記，寬度我們可以設定100%)。

接下來我們設定裡面的文字，display: flex; 將header設定為flex元素，在使用
justify-content: center;水平置中，flex-direction: column;將水平的軸線，改為垂直的軸線。

ps.設定為flex元素後，我們可以選擇flex-start(預設)靠左、center置中、flex-end靠右。
Ps.設定flex-direction之後，我們就是flex-end靠底部跟flex-start靠上方。